<template>
  <div style="position: relative;min-height: 80vh;">
    <!-- 头部 -->
    <myDivider name="事件派单"></myDivider>
    <el-page-header @back="$router.go(-1)">
    </el-page-header>



    <!-- 表单 -->
    <el-form ref="ruleForm" class="fromStyle" :rules="rules" :model="formData" label-width="150px">
      <el-form-item label="内部工单号：">
        <el-input style="width: 200px;" v-model="formData.orderNumber" placeholder="请输入内部工单号"></el-input>
      </el-form-item>

      <el-form-item label="工单级别：">
        <el-select class="ok" v-model="formData.urgency" placeholder="请选择工单级别">
          <el-option label="一般" value="1"></el-option>
          <el-option label="紧急" value="2"></el-option>
          <el-option label="特急" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="派工内容：">
        <el-input rows="5" type="textarea" class="ok" v-model="formData.description" placeholder="请输入派工内容"></el-input>
      </el-form-item>

      <el-form-item label="服务部门：">
        <el-cascader change-on-select class="ok" v-model="formData.depts" :options="DepartmentList"
          @change="handleChange"></el-cascader>
      </el-form-item>

      <el-form-item label="服务人员：">
        <el-select class="ok" v-model="formData.workerId" placeholder="请先选择部门">
          <el-option v-for="item, i in waiterList" :key="i" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="btn">
      <el-button style="width: 100px;" @click="cancel">取消</el-button>
      <el-button style="width: 100px;" type="primary" @click="okk">确认</el-button>
    </div>

  </div>
</template>

<script>
export default {

  data() {
    return {
      rules: {
        // urgency: [
        //   { required: true, message: '请选择工单级别', trigger: 'change' }
        // ],
        // description: [
        //   { required: true, message: '请输入派工内容', trigger: 'blur' }
        // ],
        // depts: [
        //   { required: true, message: '请选择服务部门', trigger: 'change' }
        // ],
        // workerId: [
        //   { required: true, message: '请选择服务人员', trigger: 'change' }
        // ],

      },
      formData: {},
      d2Data: [],
      d4Data: [],
      d5Data: [],
      // 部门列表
      DepartmentList: [],
      waiterList: [],
      logOnUser: {},
    }
  },
  created() {

  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    let res = await this.$api.events.EventDetail(this.$route.query.eventId)
    console.log(res.data, '事件详情');
    if (res.code == 200) {
      this.$set(this.formData, 'urgency', '1')
      this.$set(this.formData, 'orderNumber', '')
      this.$set(this.formData, 'description', '')
      this.$set(this.formData, 'depts', [])
      this.$set(this.formData, 'workerId', '')

      this.$set(this.formData, 'category', res.data.serviceCategory)
      this.$set(this.formData, 'eventId', res.data.id)
      this.$set(this.formData, 'isPublic', res.data.isPublic)
      this.$set(this.formData, 'customerId', res.data.customerId)
      this.$set(this.formData, 'customerName', res.data.customerName)
      this.$set(this.formData, 'companyId', this.logOnUser.unitId)
      this.$set(this.formData, 'companyName', this.logOnUser.unitType == 'system' ? '系统' : this.logOnUser.unitName)
      this.$set(this.formData, 'userId', this.logOnUser.id)
      this.$set(this.formData, 'userNmae', this.logOnUser.name)
      this.$set(this.formData, 'phone', res.data.phone)
      this.$set(this.formData, 'residentialId', res.data.residentialId)
      this.$set(this.formData, 'buildingId', res.data.buildingId)
      this.$set(this.formData, 'roomId', res.data.roomId)
      this.$set(this.formData, 'orderWay', res.data.eventWay)

      if (res.data.imgs == null) {
        this.$set(this.formData, 'imgs', [])
      } else {
        this.$set(this.formData, 'imgs', res.data.imgs)
      }
      this.$set(this.formData, 'reservationDay', res.data.reservationDay)
      this.$set(this.formData, 'reservationInterval', res.data.reservationInterval)
      this.$set(this.formData, 'status', '2') //任务派单 传2
    } else {
      this.$message.error(res.message)
    }



    this.myGetDepartmentList() // 获取部门列表  


    this.$nextTick(() => {
      this.$refs['ruleForm'].clearValidate()
    })


  },
  methods: {
    async myGetDepartmentList() {
      let res = await this.$api.events.getDepartmentList({
        "unitType": this.logOnUser.unitType,
        "unitId": this.logOnUser.unitId,
        "pageNum": 1,
        "pageSize": 1000000
      })
      this.DepartmentList = this.dgfun(res.data.list)
    },
    // 递归
    dgfun(res) {
      let arr = []
      res.forEach(el => {
        // 如果有孩子们，继续遍历
        if (el.children != null) {
          el.children = this.dgfun(el.children)
        }
        arr.push({
          value: el.id,
          label: el.name,
          children: el.children,
        })
      })
      return arr
    },
    // 部门列表选择项事件
    async handleChange() {

      let res = await this.$api.events.myGetUserListByDepId(this.formData.depts[this.formData.depts.length - 1])
      if (res.code == 200) {
        this.waiterList = res.data
      } else {
        this.$message.error(res.message)
      }

      if (this.formData.workerId != '') {
        this.$set(this.formData, 'workerId', '')
      }
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    cancel() {
      this.$confirm('返回后不保存内容，确定返回吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {

      });
    },
    okk() {

      let name = ''
      if (this.formData.workerId) {
        name = '已选择服务人员，确定后登记并派发工单，确定生成工单吗？确定后事件不可修改。'

      } else {
        name = '未选择服务人员，确认后登记工单，可在工单管理处再次派单，确定生成工单吗？确认后事件不可修改。'
      }
      this.$confirm(name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async () => {

        let res = await this.$api.events.Addwork(this.formData)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '派单成功'
          });

          this.$router.push(`/workOrder/workDetail?id=${res.data.id}`)
        } else {
          this.$message.error(res.message)
        }

      }).catch(() => {

      });
    },

  },

  deactivated() {
  },
}
</script>

<style lang="less" scoped>
.fromStyle {
  margin-top: 50px;
  width: 1000px;
}

// 所有的input宽度
.ok {
  width: 500px;
}

// 添加取消按钮
.btn {
  // margin-top: 50px;
  background-color: white;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px 1px #e1e1e1;
}
</style>